<template>
  <view :class="['qui-page', header ? 'qui-page--padding' : '']">
    <!--
      放在这里是因为数据是异步请求的，然后判断论坛的显示状态。
      这样每个页面还是需要引入这个组件，一个是和主题相关，一个是和站点显示状态有关
    -->
    <qui-header-back v-if="header"></qui-header-back>
    <view v-if="loading" class="loading">
      <u-loading :size="60"></u-loading>
    </view>
    <qui-page-message v-else-if="showMessage"></qui-page-message>
    <view v-else>
      <slot />
    </view>

    <!-- #ifdef MP-WEIXIN -->
    <uni-popup ref="auth" type="bottom">
      <qui-auth @login="login" @close="close"></qui-auth>
    </uni-popup>
    <!-- #endif -->
  </view>
</template>

<script>
  import {
    mapState
  } from 'vuex';
  import loginModule from '@/mixin/loginModule';
  // #ifdef H5
  import user from '@/mixin/user';
  import forums from '@/mixin/forums';
  // #endif
  // #ifndef MP-WEIXIN
  import appCommonH from '@/utils/commonHelper';
  // #endif
  export default {
    // #ifdef H5
    mixins: [forums, appCommonH, user, loginModule],
    // #endif
    props: {
      header: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        isRun: false,
      };
    },
    computed: {
      ...mapState({
        forumError: state => state.forum.error,
      }),
      loading() {
        return this.forumError.loading;
      },
      showMessage() {
        return (
          [
            'not_install',
            'site_closed',
            'ban_user',
            'model_not_found',
            'dataerro',
            'permission_denied',
          ].indexOf(this.forumError.code) !== -1
        );
      },
    },
    watch: {
      forumError(newValue) {
        if (newValue.loading === false && !newValue.code) {
          this.$emit('pageLoaded');
        }
      },
      // #ifdef H5
      $route: {
        handler(val, oldVal) {
          if (val.path !== oldVal.path && !this.isRun) {
            this.isRun = true;
            uni.$emit('apploaded');
            this.isRun = false;
          }
        }, // 深度观察监听
        deep: true,
      },
      // #endif
    },
    mounted() {
      // #ifdef MP-WEIXIN
      this.$store.dispatch('session/setAuth', this.$refs.auth);
      // #endif
    },
    methods: {
      // #ifdef MP-WEIXIN
      open() {
        if (!this.loading && !this.showMessage && !this.$store.getters['session/get']('isLogin')) {
          this.$refs.auth.open();
        }
      },
      close() {
        this.$refs.auth.close();
      },
      login() {
        this.$refs.auth.close();
      },
      // #endif
    },
  };
</script>

<style lang="scss">
  @import '@/styles/base/variable/global.scss';
  @import '@/styles/base/theme/fn.scss';

  .qui-page {
    width: 100%;
    min-height: 100%;
    color: --color(--qui-FC-333);
    background-color: --color(--qui-BG-1);
    box-sizing: border-box;
    transition: $switch-theme-time;

  }

  .qui-page--padding {
    color: --color(--qui-FC-333);
    /* #ifdef MP-WEIXIN */
    padding-top: 35rpx;
    /* #endif */
  }
</style>
